<template>
    <div class="invites"  v-loading="loading">
        <div class="header">
            会议邀请
        </div>
        <div class="listbox">
            <div class="title">项目名称</div>
            <div class="content">
                <span class="l">项目名称</span>
                <span class="r">{{ details.projectName }}</span>
            </div>
            <div class="content">
                <span class="l">会议名称</span>
                <span class="r">{{ details.meetingName }}</span>
            </div>
            <div class="content">
                <span class="l">会议时间</span>
                <span class="r">{{ details.meetingStartTime }}</span>
            </div>
            <div class="content">
                <span class="l">会议地点</span>
                <span class="r">{{ details.meetingPlace }}</span>
            </div>
            <div class="content">
                <span class="l">会议内容</span>
                <span class="r">{{ details.projectContent }}</span>
            </div>
            <div class="content">
                <span class="l">联系方式</span>
                <span class="r">{{ details.mobile }}</span>
            </div>
        </div>
        <div class="listbox" v-if="details.receiveStatus == 1">
            <div class="title">信息填写</div>
            <el-form ref="form" :model="form" label-width="80px" label-position="left">
                <el-form-item label="专家姓名">
                    <el-input v-model="form.realName"></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="form.mobile"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="btn" style="background-color: #999;" v-if="details.receiveStatus != 1">{{ details.ch }}</div>
        <div class="btn" style="background-color: #20AB5E;" @click="tometting(2)" v-if="details.receiveStatus == 1">同意参会</div>
        <div class="btn" style="background-color: #D42424;" @click="tometting(3)"  v-if="details.receiveStatus == 1">拒绝参会</div>
    </div>
  </template>
  <script>
import { http } from '@/api'
  export default {
    name: 'Login',
    data() {
      return {
        form: {},
        details: {},
        id: 0,
        loading: true,
        getstatus: ['','待接受','已接受','已拒绝','已签到','已签退']
      }
    },

    created(){
        var url = window.location.href ;
        this.id = url.split("?")[1].split('=')[1]
        this.getdetail()
    },
    methods: {
        getdetail(){
            http.meeting_invites.detail({
                meetingId: this.id
      }).then(res => {
        this.details = res.data,
        this.details.ch = this.getstatus[this.details.receiveStatus]
        if(this.details.isLeader == 1){
            this.$router.push({
                path:'/invitesmore',
                query: {
                    id: this.id
                }
            })
        }
        this.loading = false
      })
        },
        tometting(state){
            http.meeting_invites.tomeet({ ...this.form,status:state ,meetingId: this.id,smsCode:'666666'}).then(res => {
            this.$message.success(res.msg)
            this.getdetail()
      })
    }
    }
  }
  </script>
  
  <style lang="scss">
  .invites {
    .header{
        height: 65px;
        line-height: 65px;
        width: 100%;
        background-color: #fff;
        text-align: center;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;

    }
    .listbox{
        width: calc(100% - 32px);
        margin: 25px 16px;
        background-color: #fff;
        border-radius: 20px;
        padding: 0 21px  16px 21px;
        .title{
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            line-height: 42px;
        }
        .content{
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                line-height: 26px;
                display: flex;
                .l{
                    width: 92px;
                    display: inline-block;
                }
            }
    }
    .btn{
        // width: ;
        height: 40px;
        border-radius: 10px;
        line-height: 40px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        width: calc(100% - 32px);
        margin: 25px 16px 0;
    }
  }
  </style>
  